\[JS30\] Day 3 - CSS Variables

JavaScript 30 本文总阅读量次

CSS 也能變數管理嗎？

Day 3: CSS Variables

製作 CSS 變數

檔案結構

input type=”range”

range可以將 input 轉變為橫向拉桿，再藉由min="" max=""來設定由右至左兩端的極限值，並且就跟其他 input 一樣使用value=""建立預設值。

input type=”color”

color是調色盤功能，能夠詳細的讓使用者選定需要的顏色。

原生 CSS 變數

與常見的 CSS 預處理器不同，原生的變數可以再建立完畢後，透過 JS 逕行調整，跟 SASS / Less 用來加速開發過程的變數並不相同。我們可以透過:root {--variable name: value}的方式建立，再透過var(--variable name)來套用到指定的 CSS 語法中，接下來直接實做出第一段內容，讓大家更熟悉這個模式吧!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*建立變數*/
:root {
  --base: #ffc660;
  --spacing: 10px;
  --blur: 10px;
}

/*套用變數*/
img {
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}
.hl {
  color: var(--base);
}

JS 調整功能

Step1 : 建立 function

1
2
3
function handleUpdate() {
  document.documentElement.style.setProperty(`--${this.name}`, this.value);
}

一上來就都是比較少用到的語法，分別列在下方一一解釋:
1.document.documentElement選定整個 HTML 文件。
2.style.setProperty設定 CSS 屬性。
3.This是一個 JS 使用頻率很高的功能，在這裡this會’指向’使用 function 的 DOM 元素，關於this的細節可以看我之前寫的This 用途整理。

所以上述的 code 會取出該元素的 name、value 兩個 attribute 的值，再將這些值套用到 <HTML>的 Inline Style，藉此達到調整畫面的效果。

但這樣還不夠，許多 css 數值是需要寫上單位的，所以這邊我們就可以用到 Day 1 使用過的 data-*，預先再 DOM 元素上建立需要的數值，再透過 JS 取出使用。

1
2
3
4
5
function handleUpdate() {
  // 如果沒有 data-sizing，就帶入空字串，便可應用在不需要值的 CSS
  const suffix = this.dataset.sizing || '';
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

Step2 : 套上 function…就這樣

1
2
3
const inputs = document.querySelectorAll('.controls input');
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

這邊就都是大家比較熟悉的部分了，透過querySelectorAll選擇所有 input，再用forEach()帶入 function，比較不同的地方是，我們建立了兩個事件監聽器，除了change以外，如果在mousemove滑鼠移動時也能使用 function 的話，能夠更即時的反應出調整效果。

Full Script

1
2
3
4
5
6
7
8
const inputs = document.querySelectorAll('.controls input');
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

function handleUpdate() {
  const suffix = this.dataset.sizing || '';
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

相關連結

JavaScript 30